<template>
  <div class="fixed z-100 w-full h-full z-10 left-0 top-0" style="background: rgba(0, 0, 0, 0.6)">
    <div
      class="absolute w-342px h-434px bg-white flex flex-col left-521px top-196px z-11 items-center"
    >
      <div class="pt-48px font-bold text-20px" style="color: #4979ff">扫码登录</div>
      <div class="pt-16px text-16px" style="color: #333">请使用微信扫描二维码登录</div>
      <transition name="zoom">
        <div
          v-if="user.url"
          class="w-246px h-246px mt-24px relative"
          style="border: 1px solid #ababab"
        >
          <img :src="user.url" alt="" />
          <div
            v-if="isExpired"
            class="absolute qr-code-expires-wrapper w-246px h-246px flex flex-col items-center left-0 top-0"
          >
            <img
              :src="qrCodeExpiredRefresh"
              class="mt-82px cursor-pointer"
              :class="{ loading: isLoadingQrCode }"
              @click="refresh"
            />
            <div class="text-18px leading-26px text-white mt-16px">二维码已过期，请刷新</div>
          </div>
        </div>
      </transition>
    </div>
    <div class="absolute cursor-pointer w-24px h-24px left-895px top-196px" @click="close()">
      <img :src="closeLogin" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import closeLogin from '@renderer/assets/closeLogin.svg'
import qrCodeExpiredRefresh from '@renderer/assets/qrCodeExpiredRefresh.svg'
import { useUserStore } from '@renderer/store/modules/user'
import { useCartStore } from '@renderer/store/modules/cart'

let timer: number | null = null
export default defineComponent({
  name: 'LoginCard',
  emits: ['on-close'],
  setup(_, { emit }) {
    const user = useUserStore()
    const cart = useCartStore()
    const state = ref(Math.random().toString().slice(2))
    const isExpired = ref<boolean>(false)
    const isLoadingQrCode = ref<boolean>(false)
    onMounted(async () => {
      user.setState(state.value)
      // 获取二维码
      await user.getTicket()
      watcher()
      // 登录
      await user.login(() => {
        // 获取用户的购物车
        cart.init()
        close()
        user.changeStatus('success')
        let timer: number | null = setTimeout(() => {
          clearTimeout(timer as number)
          timer = null
          user.changeStatus('pending')
        }, 1000)
      })
    })
    onUnmounted(() => {
      clearInterval(timer as number)
      timer = null
    })
    const close = () => emit('on-close')
    const refresh = async () => {
      isLoadingQrCode.value = true
      await user.getTicket()
      isLoadingQrCode.value = false
      isExpired.value = false
      watcher()
    }
    const watchExpireWrapper = () => {
      let timer: null | number = null
      return (time = 60) => {
        if (timer) return
        timer = setTimeout(() => {
          isExpired.value = true
          clearTimeout(timer as number)
          timer = null
        }, time * 1000)
      }
    }
    const watcher = watchExpireWrapper()
    return {
      user,
      closeLogin,
      close,
      isExpired,
      qrCodeExpiredRefresh,
      refresh,
      isLoadingQrCode
    }
  }
})
</script>

<style scoped>
.qr-code-expires-wrapper {
  background-color: rgba(0, 0, 0, 0.6);
}
.loading {
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
